<!--管理员的出题的题目列表-->
<template>
  <Panel title="所有题目">
    <div slot="header">
      <el-input
          v-model="keyword"
          prefix-icon="el-icon-search"
          @keyup.enter.native="currentChange"
          placeholder="Keywords">
      </el-input>
    </div>
    <el-table
        v-loading="loading"
        element-loading-text="loading"
        ref="table"
        :data="model.data">
      <el-table-column
          prop="problemId"
          width="150"
          label="Display ID">
      </el-table-column>
      <el-table-column
          prop="title"
          label="Title">
      </el-table-column>
      <el-table-column
          prop="source"
          label="Source">
      </el-table-column>
      <el-table-column
          fixed="right"
          width="250"
          label="Operation">
        <template slot-scope="scope">
          <icon-btn name="Go Edit" icon="el-icon-edit-outline"
                    @click.native="goEdit(scope.row.problemId)"></icon-btn>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-if="model.totalCount"
        style="margin-top: 20px;"
        :current-page.sync="currentPage"
        background
        layout="prev, pager, next"
        @current-change="currentChange"
        :page-size="50"
        :total="model.totalCount">
    </el-pagination>
  </Panel>
</template>

<script>
import {getProblemList} from '@/network/problem'

export default {
  data() {
    return {
      currentPage: null,
      model: {
        data: [],
        totalCount: 0
      },
      keyword: '',
      loading: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getProblemList()
    },
    // 切换页码回调
    currentChange() {
      this.getProblemList(this.currentPage)
    },
    getProblemList(page) {
      this.loading = true;
      getProblemList(this.keyword, page).then(res => {
        console.log(res.data);
        this.model = res.data;
        this.loading = false
      }).catch(_ => {
        console.log(_);

      })
    },
    goEdit(problemId) {
      this.$router.push({name: 'edit-problem', params: {problemId}})
    }
  },
  watch: {
    '$route': function (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.init()
      }
    }
  }
}
</script>

<style>

</style>
